<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/product-details.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/download/font_2578555_m0m2d3el9f/iconfont.css">
</head>

<body>
    <div class="top-nav">
        <div class="top-nav-wrapper">
            <ul class="top-nav-l">
                <li>
                    <a href="">
                        <span>
                            <i class="iconfont icon-xingxing"></i> 收藏鲜花网(hua.com)</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>
                            <i class="iconfont icon-weixin"></i> 关注微信</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>
                            <i class="iconfont icon-hua"></i> 花礼网APP</span>
                    </a>
                </li>
            </ul>
            <ul class="top-nav-r">
                <li id="sign">
                    <a href="./register.html">您好，请登录</a>
                </li>
                <li>
                    <a href="">
                        订单查询
                    </a>
                </li>
                <li>
                    <a href="">
                        客户服务
                        <i class="iconfont icon-jiantou1"></i>
                    </a>
                </li>
                <li>
                    <a href="">
                        购物车
                        <span>(0)</span>
                    </a>
                </li>
                <li>
                    鲜花礼品网:国内领先鲜花网品牌
                </li>
            </ul>
        </div>
    </div>
    <script src="./libs/jquery.2.2.4.js"></script>
    <script>
        console.log(localStorage);
        if (localStorage.getItem("isLogin") === "OK") {
            $("#sign").html(`<a href="./personal.html">${localStorage.getItem("username")}</a>`)
        } else {
            $("#sign").html(`<a href="./register.html">您好，请登录</a>`)
        }
    </script>
    <!-- 搜索栏 -->
    <div class="clearfix">
        <div class="logo-nav">
        </div>
        <div class="search-box-group">
            <div class="search-icon">
                <i class="iconfont icon-shijian"></i>
            </div>
            <input type="text" placeholder="商品搜索" class="search-box-input">
            <div class="search-box-btn">
                <button>搜索</button>
            </div>
            <ul class="cearch-flo">
                <li>
                    <a href="">
                        红玫瑰
                    </a>
                </li>
                <li>
                    <a href="">
                        永生花
                    </a>
                </li>
                <li>
                    <a href="">
                        生日蛋糕
                    </a>
                </li>
                <li>
                    <a href="">
                        礼物卡
                    </a>
                </li>
            </ul>
        </div>
        <div>
            <i class="iconfont icon-dianhua"></i>
            <span> 400-889-8188</span>
        </div>
        <div>
            <i class="iconfont icon-kefu"></i>
            <span>在线客服</span>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="navi-cont">
        <div class="navi-cate">
            <i class="iconfont icon-gengduo"></i>
            <a href="" id="out">所有分类</a>
        </div>

        <ul class="navi-nav">
            <li>
                <a href="details.html">
                    鲜花
                </a>
            </li>
            <li>
                <a href="">
                    永生花
                </a>
            </li>
            <li>
                <a href="">
                    蛋糕
                </a>
            </li>
            <li>
                <a href="">
                    礼品
                </a>
            </li>
            <li>
                <a href="">
                    巧克力
                </a>
            </li>
            <li>
                <a href="">
                    花语大全
                </a>
            </li>
            <li>
                <a href="">
                    企业团购
                </a>
            </li>
            <li>
                <a href="">
                    设计师臻选鲜花
                </a>
            </li>
            <li>
                <a href="">
                    儿童节鲜花礼物
                </a>
            </li>
        </ul>
    </div>
    <!-- 导航END -->
    <div class="crumb-wrap">
        <div class="cru-t">
            <a href="">首页</a>
            >
            <a href="">鲜花</a>
            <a href="">
                > 韩式系列/公主的假日
            </a>
        </div>
        <div class="product-intro">
            <div class="preview">
                <div class="swer">
                    <img src="http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg" alt="" class="png">
                    <div id="lay"></div>
                    <div id="b_box">
                        <img src="http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg" alt="">
                    </div>
                </div>
                <!-- 选项卡 -->
                <div class="preview-list">
                    <div class="pre-1">
                        <img src="http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg" alt="">
                    </div>
                    <div class="pre-1">
                        <img src="http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg" alt="">
                    </div>
                    <div class="pre-1">
                        <img src="http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg" alt="">
                    </div>
                    <div class="pre-1">
                        <img src="http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="product-info">
                <div class="title">
                    <h1 class="flname">韩式系列/初心不负</h1>
                    <span class="tit">[花艺师打造 韩式花束系列]</span>
                    <em>戴安娜玫瑰11枝、白色洋桔梗5枝、大叶尤加利10枝</em>
                </div>
                <div class="price">
                    <span>售价</span>
                    <em class="prem">229</em>
                    <h2>市场价</h2>
                    <h3>229</h3>
                    <i class="iconfont icon-app"></i>
                    <h2>手机专享价￥215</h2>
                    <h2>已售</h2>
                    <h5>7771</h5>
                    <h4>件</h4>
                </div>
                <div class="huayu">
                    <div class="huayu-item">
                        <span class="huayu-label">材料</span>
                        <p class="huayu-content">
                            韩式花束系列：卡罗拉玫瑰11枝、3头或以上白底粉边洋桔梗5枝（如白底粉边桔梗缺货，可用白色桔梗代替）、大叶尤加利10枝、4枝红豆（红豆属于季节性花材，如缺货用相思梅等类似花材代替）
                        </p>
                    </div>
                    <div class="huayu-item">
                        <span class="huayu-label">包装</span>
                        <p class="huayu-content">
                            红/金色鎏金纸5张、透明雾面纸3张、酒红色罗纹烫金丝带2米
                        </p>
                    </div>
                    <div class="huayu-item">
                        <span class="huayu-label">花语</span>
                        <p class="huayu-content">
                            以热烈主题的红玫瑰及红色包装，搭配象征白色无暇的桔梗为设计主题，打造全新韩式系列。将这一簇美景包裹在一片雪白中，一条满载希望的丝带扎紧了无限的惊喜，只为将全世界的风景奉献于你怀里
                        </p>
                    </div>


                </div>
                <div class="delivery-range">
                    <span>配送说明</span>
                    <em>全国(小城市请提前一天预定)</em>
                </div>
                <div class="deliItem">
                    <span>配送至</span>
                    <a href="">省/市/区<i class="iconfont icon-jiantou1"></i></a>
                    <h2>请选择配送区域</h2>
                </div>
                <div class="del-item">
                    <span>选择</span>
                    <a href="">
                        <div class="del-1">
                            <img src="http://i.ahj.cm/g/1/2020/02/1_06343303246160255_220.jpg" alt="">
                            <h3>韩式花篮/阳光使者</h3>
                        </div>
                        <div class="del-1">
                            <img src="http://i.ahj.cm/g/1/2020/02/1_06343303246160255_220.jpg" alt="">
                            <h3>韩式花篮/阳光使者</h3>
                        </div>
                    </a>
                </div>
                <div class="btnAddcart">
                    <a href="">
                        <i class="iconfont icon-gouwuche">
                            <em>加入购物车</em>
                        </i>
                    </a>
                </div>
                <div class="btnAddcart">
                    <a href="">
                        <h2>立即购买</h2>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">

    </div>
</body>
<script src="./libs/require.js" data-main="./js/product.js"></script>
<script src="./js/ajax.2.0.js"></script>
<script src="./libs/jquery.2.2.4.js"></script>
<script>
    $(".foot").load("http://localhost:3000/html/Common_style.html .end-tail")
</script>
<script>
    function Big(ops) {
        // 选择元素
        this.previmgs = ops.previmgs
        console.log(this.previmgs);
        this.png = ops.png;
        console.log(this.png);
        this.flname = ops.flname;
        this.tit = ops.tit;
        this.prem = ops.prem;
        this.prodinto = ops.prodinto
        this.sBox = ops.sBox;
        this.sBspan = ops.sBspan;
        this.bBox = ops.bBox;
        this.bBimg = ops.bBimg;
        this.prev = ops.prev;
        this.arr = ["http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg", "http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg", "http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg", "http://i.ahj.cm/g/1/2019/10/1_06256719944109825_220.jpg"];
        this.sBoxImg = ops.sBoxImg;
        this.url = "http://localhost:3000/data/data.json";
        this.load()
        // 绑定事件
        this.addEvent()
    }
    Big.prototype.load = function () {
        ajax({
            url: this.url,
            success: (res) => {
                this.res = JSON.parse(res);
                this.render()
            }
        })
    }
    Big.prototype.render = function () {
        const that = this;
        // for (let i = 0; i < this.res.length; i++) {
        //     // if (this.res[i].proId === getCookie("climg")) {
        //     //     this.flname.innerHTML = this.res[i].product_name;
        //     //     this.tit.innerHTML = this.res[i].title;
        //     //     this.prem.innerHTML = this.res[i].price;
        //     //     for (let j = 0; j < this.png.length; j++) {
        //     //         this.png[j].src = this.res[i].url
        //     //         this.previmgs[j].src = this.res[i].url
        //     //     }
        //     // }
        // }
    }
    Big.prototype.addEvent = function () {
        const that = this;
        // 绑定进入
        this.sBox.onmouseover = function () {
            // 显示
            that.show()
        }
        // 绑定离开
        this.sBox.onmouseout = function () {
            // 隐藏
            that.hide()
        }
        // 绑定移动
        this.sBox.onmousemove = function (eve) {
            const e = eve || window.event;
            // 移动
            that.move(e);
        }

        for (let i = 0; i < this.prev.length; i++) {
            this.prev[i].onmousemove = function () {
                // that.Change(i);
            }
        }
    }

    // Big.prototype.Change = function (i) {
    //     this.sBoxImg.src = this.res[i].url;
    //     this.bBimg.src = this.res[i].url;
    // }
    Big.prototype.show = function () {
        this.bBox.style.display = "block";
        this.sBspan.style.display = "block";
        // 设置span的尺寸
        // 提醒一定要在显示之后设置，否则，显示之前无法获取css样式
        // 提前获取各种尺寸
        this.sbw = this.sBox.offsetWidth;
        this.sbh = this.sBox.offsetHeight;
        this.bbiw = this.bBimg.offsetWidth;
        this.bbih = this.bBimg.offsetHeight;
        this.bbw = this.bBox.offsetWidth;
        this.bbh = this.bBox.offsetHeight;

        // 计算并设置span的尺寸
        this.sBspan.style.width = this.sbw / (this.bbiw / this.bbw) + "px";
        this.sBspan.style.height = this.sbh / (this.bbih / this.bbh) + "px";
    }
    Big.prototype.hide = function () {
        this.bBox.style.display = "none";
        this.sBspan.style.display = "none";
    }
    Big.prototype.move = function (e) {
        let l = e.pageX - this.sBox.offsetLeft - this.sBspan.offsetWidth / 2;
        let t = e.pageY - this.sBox.offsetTop - this.sBspan.offsetHeight / 2

        // 边界限定
        if (l < 0) l = 0;
        if (t < 0) t = 0;
        if (l > this.sbw - this.sBspan.offsetWidth) {
            l = this.sbw - this.sBspan.offsetWidth
        }
        if (t > this.sbh - this.sBspan.offsetHeight) {
            t = this.sbh - this.sBspan.offsetHeight
        }

        // 设置span的跟随效果
        this.sBspan.style.left = l + "px";
        this.sBspan.style.top = t + "px";

        // 计算比例
        // 当前移动的距离 / 一共能移动的距离
        let x = l / (this.sbw - this.sBspan.offsetWidth);
        let y = t / (this.sbh - this.sBspan.offsetHeight);
        // console.log(x, y)

        // 跟随移动
        // 当前移动的距离 = 总距离 * 比例
        this.bBimg.style.left = (this.bbw - this.bbiw) * x + "px";
        this.bBimg.style.top = (this.bbh - this.bbih) * y + "px";
    }


    new Big({
        sBox: document.querySelector(".swer"),
        sBoxImg: document.querySelector(".swer img"),
        bBox: document.querySelector("#b_box"),
        bBimg: document.querySelector("#b_box     img"),
        sBspan: document.querySelector("#lay"),
        prev: document.querySelectorAll(".pre-1 img"),
        prodinto: document.querySelector(".product-intro"),
        flname: document.querySelector(".flname"),
        tit: document.querySelector(".tit"),
        prem: document.querySelector(".prem"),
        png: document.querySelectorAll(".swer img"),
        previmgs: document.querySelectorAll(".preview-list img")
    });
</script>

</html>